import { Alert,Cascader, message,Tabs } from 'antd';
import { useEffect, useState } from 'react';
import { getCateList } from '../../api/goods';
import TableList from './components/tableList';
import type { TabsProps } from 'antd';
function Params() {
    // 定义分类列表
    let [options,setoptions] = useState<ParamsType[]>([]);
    // 当前选中的分类id列表
    let [cate_id,setCate_id] = useState<number[]>([]);
    let onChange = (value:number[])=>{
        console.log(value)
        if(value.length<3){
            message.warning("请选择三级分类！！！")
            setCate_id([]);
            return
        }
        setCate_id(value)
    }
    // 获取分类列表
    let getDataList = async ()=>{
        let res:ResponsType = await getCateList({type:[1,2,3]});
        setoptions(res.data.data)
    }
    const items: TabsProps['items'] = [
        {
          key: '1',
          label: `动态参数`,
          children: <TableList sel='many' cate_ids ={cate_id}></TableList>,
        },
        {
          key: '2',
          label: `静态属性`,
          children: <TableList sel='only' cate_ids ={cate_id}></TableList>,
        },
      ];
    useEffect(()=>{
        getDataList();
    },[])
    return (
        <div>
            <div>
                <Alert message="注意：只允许为三级分类设置相关参数！！！" type='warning' showIcon closable />
            </div>
            <div style={{margin:"20px 0"}}>
                选择商品分类：<Cascader options={options} onChange={(value:number[] | any)=>onChange(value)} placeholder="请选择商品分类" fieldNames={{label:"cat_name",value:"cat_id",children:"children"}} value={cate_id}/>
            </div>
            <div>
            <Tabs defaultActiveKey="1" items={items}/>
            </div>
        </div>
    )

}

export default Params;